<style lang="scss" scoped>
    .user-photo {
        display: inline-block;
        border: 3px rgba(255, 255, 255, 0.5) solid;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-size: cover;
        /* background-repeat: no-repeat; */
        background-color: #fff;
        background-position: center center;
        position: relative;
        overflow:hidden;
        > a{
            cursor: pointer;
            font-size:12px;
            transition: all 1s;
            opacity:0;
            position: absolute;
            width: 100%;
            height: 100%;
            padding:7px;
            background:rgba(0,0,0,.5);
            color:#fff;
            bottom: -70%;
            &:hover{
                opacity: 1;
            }
        }
    }
</style>
<template>
    <ui-main :title="$route.name">
        <div class="">
            <ui-avatar
                withCredentials
                field="img"
                @crop-success="cropSuccess"
                @crop-upload-success="cropUploadSuccess"
                @crop-upload-fail="cropUploadFail"
                v-model="show"
                :width="300"
                :height="300"
                url="http://192.200.204.17:8080/m-web/admin/file/uploadFile"
                :params="params"
                :headers="headers"
                img-format="png"
                noCircle />
            <div class="user-photo " :style="'background-image: url('+imgDataUrl+');'">
                <a class="t-c" @click="toggleShow">设置头像</a>
            </div>

        </div>
        <!--说明文档-->
         <div class="p-20">
             <ui-load-md no-bar file="avatar.md"></ui-load-md>
         </div>
    </ui-main>
</template>
<script>

    export default {
        data() {
            return {
                show: false,
                params: {
                    token: '123456798',
                    name: 'avatar'
                },
                headers: {
                    smail: '*_~'
                },
                imgDataUrl: '/static/tuzi.gif' // the datebase64 url of created image
            }
        },
        methods: {
            toggleShow() {
                this.show = !this.show;
            },
            /**
             * crop success
             *
             * [param] imgDataUrl
             * [param] field
             */
            cropSuccess(imgDataUrl, field) {
                console.log('-------- crop success --------');
                this.imgDataUrl = imgDataUrl;
            },
            /**
             * upload success
             *
             * [param] jsonData   服务器返回数据，已进行json转码
             * [param] field
             * // /admin/file/uploadFile?relation_id=f7f0cae4d301406a9481a2917942c747&material_type=04&archives_type=0402
             */
            cropUploadSuccess(jsonData, field) {
                console.log('-------- upload success --------');
                console.log(jsonData);
                console.log('field: ' + field);
            },
            /**
             * upload fail
             *
             * [param] status    server api return error status, like 500
             * [param] field
             */
            cropUploadFail(status, field) {
                console.log('-------- upload fail --------');
                console.log(status);
                console.log('field: ' + field);
            }
        }
    }
</script>
